<template>
  <u-card v-if="item" padding="20rpx 30rpx" margin="20rpx 30rpx" :border="false" class="item" :show-head="false">
    <template #body>
      <view class="item-body" @click="handleDetail">
        <view class="flex items-center">
          <up-avatar :src="item.avatar"></up-avatar>
          <view class="ml-[20rpx] flex-1">
            <view class="flex items-center text-[28rpx]">
              <up-copy class="mr-[30rpx]" :content="item.nickname">{{item.nickname}}</up-copy> 
              <up-copy class="mr-[30rpx]" v-if="item.beizhu" :content="item.beizhu">{{ item.beizhu }}</up-copy> 
              <up-copy :content="item.id+''">ID:{{item.id}}</up-copy>
            </view>
            <view class="flex items-center text-[24rpx] text-[red] mt-[16rpx]">
              <text v-if="item.level" class="mr-[20rpx]">{{item.level}}</text>
              <text class="mr-[20rpx]">{{dateFormat(item.reg_time)}} 注册</text>
              <!-- <up-copy v-if="item.mobile" :content="item.mobile">{{item.mobile}}</up-copy> -->
            </view>
          </view>
          <view class="statusbox">
            <view class=" text-[24rpx]">
              <text v-if="item.status==-1" style="color: #f00;">已拉黑</text>
              <text v-else-if="item.status==1" style="color: #38b500;">正常</text>
              <text v-else-if="item.status==2" style="color: #0000ff;">待审核</text>
              <text v-else-if="item.status==3" style="color: #f00;">已拒绝</text>
              <text v-else style="color: #999;">未注册</text>
            </view>
          </view>
        </view>	
        <view class="desc mt-[20rpx]">
          <view class="li text-[24rpx]">
            {{' '}}
            <text >红包奖励：<text class="text-[red]">{{item.count_money||0}}</text></text>
            <text class="ml-[10rpx] mr-[10rpx]">/</text>
            <text >分享奖励：<text class="text-[red]">{{item.count_share_money||0}}</text></text>
            <text class="ml-[10rpx] mr-[10rpx]">/</text>
            <text >积分：<text class="text-[red]">{{item.jifen||0}}</text></text>
          
          </view>
          <view class="li text-[24rpx] mt-[20rpx]">
            {{' '}}停止看课：<text class="text-[red] mr-[10rpx]">{{item.tingkan||0}}</text>天
          </view>
          <view class="" style="clear: both;"></view>
          <view v-if="isComWx && item.external_userid" class="qy-btn" @click="handleOpenUserProfile()"></view>
        </view>
      </view>
    </template>
    <template #foot>            
      <view class="item-footer">
        <u-button @click="handleEdit()" size="small" type="text">编辑</u-button>
        <view class="line"></view>
        <u-button v-if="item.status==2" @click="handleEditStatus(-1)" size="small"  type="text">审核</u-button>
        <!-- <u-button v-if="item.status==2 || item.status == 0" @click="handleEditStatus(1)" size="small" type="text">审核通过</u-button>
        <u-button v-if="item.status==-1" @click="handleEditStatus(1)" size="small" type="text">设为正常</u-button> -->
        
      </view>
    </template>
  </u-card>
</template>

<script lang="ts" setup>
import { computed, type PropType } from 'vue';
import { isWeChatWork, openUserProfile } from '@/addon/htscrm/utils/qyCodeAuth';
import dayjs from 'dayjs';
import { redirect } from '@/utils/common';

const props = defineProps({
  item: {
    type: Object as PropType<ICustomerItem>,
  }
})
// 是否是企业微信
const isComWx = computed(() => {
  return isWeChatWork()
});

// 格式化时间
const dateFormat = computed(() => {
  return (date: number) => dayjs(date*1000).format('YYYY-MM-DD HH:mm')
})

const emit = defineEmits(['edit','editStatus'])

/**
 * 编辑客户信息
 */
function handleEdit() {
  emit('edit')
}

function handleEditStatus(status:number) {
  emit('editStatus', status)
}

/**
 * 打开用户信息
 */
function handleOpenUserProfile() {
  openUserProfile({
    userid: props.item?.external_userid,
    type: 2
  })
}

function handleDetail() {
  redirect({
    url: '/addon/htscrm/pages/admin/customer/detail',
    param: {
      id: props.item?.id
    }
  })
}

</script>
<style lang="scss" scoped>

.item {
  .item-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .u-button {
      flex: 1;
      margin: 0;
      color: #333;
      height: 20px;
    }

    .line {
      height: 16px;
      width: 1px;
      background-color: #eee;
    }
  }

  .desc {
    position: relative;

    .li:before {
      content: "●"; /*设置标识符*/
    
      color: #ffa0a0; /*改变字体颜色*/
      margin-right: 6rpx; /*设置标识符与文本之间的距离*/
    }
  }

  .qy-btn {
    width: 60rpx;
    height: 60rpx;
    background: url('http://static.fastht.com/a7f2cd32a47e0331/b4f10b0b6dcc2c8d.png') center/100% no-repeat;
    
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
